<template>
  <a-config-provider :locale="locale">
    <div id="app">
      <router-view v-if="isRouterAlive"/>
      <a-modal
        v-if="previewVisible"
        wrapClassName="image__modal"
        :visible="previewVisible"
        :footer="null"
        @cancel="handleCancel">
        <a-spin :spinning="previewLoading">
          <div class="action__bar">
            <!-- <div v-if="imgWidth > 860 && imgClass" class="action__bar-l">
              <div :style="{ color: count === -2 ? '#999' : '#2f54eb'}" class="zoom__icon" @click="onClickSmall"><a-icon type="zoom-out" /></div>
              <div :style="{ color: count === 3 || (imgWidth < 860 + (count * 150)) ? '#999' : '#2f54eb'}" class="zoom__icon" @click="onClickBig"><a-icon type="zoom-in" /></div>
            </div> -->
            <div class="action__bar-r">
              <div
                v-if="imgWidth > 500"
                class="zoom__icon"
                @click="onClickFull">
                <a><a-icon :type=" isFull ? 'fullscreen-exit' : 'fullscreen'" /></a>
              </div>
              <div
                class="zoom__icon"
                @click="onClickRotate"
              >
                <a><a-icon type="redo" /></a>
              </div>
              <div
                class="zoom__icon"
                @click="onClickDown"
              >
                <a><a-icon type="download" /></a>
              </div>
            </div>
          </div>
          <!-- <div class="image__modal-box" :style="{ maxWidth: 860 + (count * 150) + 'px', maxHeight: 660 + (count * 150) + 'px' }"> -->
          <div class="image__modal-box" :style="{ maxWidth: previewWidth + 'px' }">
            <img :class="[imgClass]" id="previewimage" :src="previewImage" :style="{ transform: `rotate(${rotateVal}deg)` }" />
          </div>
        </a-spin>
      </a-modal>
    </div>
  </a-config-provider>
</template>

<script>
import axios from 'axios'
import { domTitle, setDocumentTitle } from '@/utils/domUtil'
import { i18nRender } from '@/locales'
export default {
  data () {
    return {
      rotateVal: 0, // 旋转的度数
      isFull: false,
      count: 0,
      imgClass: '',
      imgWidth: 0,
      previewLoading: true,
      previewImage: '',
      previewWidth: 0,
      previewName: '',
      previewVisible: false,
      isRouterAlive: true
    }
  },

  created () {
    this.initialize()
    this.keyMonitor()
  },

  provide () {
    return {
      reload: this.reload,
      openImage: this.openImage
    }
  },

  computed: {
    locale () {
      // 只是为了切换语言时，更新标题
      const { title } = this.$route.meta
      title && (setDocumentTitle(`${i18nRender(title)} - ${domTitle}`))

      return this.$i18n.getLocaleMessage(this.$store.getters.lang).antLocale
    }
  },

  methods: {

    keyMonitor () {
      // document.addEventListener('keydown', function (e) {
      //   if (e.ctrlKey && e.key === 'v') {
      //     e.preventDefault()
      //     console.log('同时按下了Ctrl+V')
      //   }
      // })
    },
    initialize () {
    },
    reload () {
      this.isRouterAlive = false
      this.$nextTick(function () {
        this.isRouterAlive = true
      })
    },

    openImage (file) {
      const { url, name } = file || {}
      this.previewVisible = true
      const image = new Image()
      image.src = url
      image.onload = (e) => {
        const { width, height } = e.currentTarget || {}
        this.imgClass = Math.ceil(width / height) >= 3 ? '' : 'scale__img'
        this.previewImage = url
        this.previewName = name
        this.previewLoading = false
        this.imgWidth = width
        this.previewWidth = this.imgWidth > 500 ? 500 : this.imgWidth
      }
    },

    handleCancel () {
      this.rotateVal = 0
      this.previewVisible = false
      this.previewLoading = true
      this.previewImage = ''
      this.previewName = ''
      this.isFull = false
      this.count = 0
    },

    onClickBig () {
      if (this.imgWidth > 860 + (this.count * 150)) {
        if (this.count < 3) this.count++
      }
    },

    onClickSmall () {
      if (this.count > -2) this.count--
    },

    onClickFull () {
      this.isFull = !this.isFull
      this.previewWidth = this.isFull ? this.imgWidth : 500
    },

    // 点击旋转
    onClickRotate () {
      this.rotateVal = this.rotateVal === 180 ? 0 : 180
    },

    onClickDown () {
      if (this.previewImage) {
        const imgUrl = this.previewImage.replace(/^https?:/, '')
        axios
        .get(imgUrl, { responseType: 'blob' })
        .then(res => {
          const blob = new Blob([res.data])
          const href = URL.createObjectURL(blob)
          Object.assign(document.createElement('a'), {
            href,
            download: (this.previewName || 'download') + '.png'
          }).click()
          URL.revokeObjectURL(href)
        })
        .catch(console.error)
      }
    }
  }
}
</script>
<style lang="less">
.ant-modal-body .ant-form .ant-form-item {
  margin-bottom: 16px;
}
.image__modal .ant-modal {
  width: auto !important;
  display: flex;
  justify-content: center;
}

.action__bar {
  position: relative;
  height: 42px;
  .action__bar-l {
    display: flex;
    justify-content: center;
    flex-grow: 1;
  }
  .action__bar-r {
    display: inline-flex;
    position: absolute;
    top: 0;
    right: 20px;
  }
  .zoom__icon {
    font-size: 28px;
    cursor: pointer;
    margin: 0 10px;
  }
}

.image__modal-box {
  margin: 20px;
  overflow: hidden;
  min-width: 200px;
  min-height: 200px;
  img {
    transition: transform 0.1s ease-in-out;
  }
}
/* .ant-table-default .ant-table-thead > tr > th {
  padding: 12px 16px !important;
  color: #4D576B !important;
}
.ant-table-default .ant-table-thead > tr > th,
.ant-table-middle .ant-table-thead > tr > th,
.ant-table-small .ant-table-thead > tr > th {
  background: #F4F7FC !important;
  font-size: 13px !important;
  border-bottom: none !important;
}

.ant-table-small > .ant-table-content .ant-table-header {
  background: #F4F7FC !important;
}

.ant-table-tbody > tr:hover > td,
.ant-table-tbody > tr.ant-table-row-hover > td {
  background: #FBFBFB !important;
}
.ant-table-tbody > tr > td {
  border-color: #EAEAEA !important;
}
.ant-table-small > .ant-table-content > .ant-table-body {
  margin: 0 !important;
} */

.ant-table-middle .ant-table-thead > tr > th {
  padding: 8px 10px !important;
  color: #4D576B !important;
  background: #F4F7FC !important;
}

.ant-table-middle .ant-table-tbody > tr > td {
  padding: 8px 10px !important;
}

.ant-alert-info {
  background-color: #f0f5ff !important;
  border: 1px solid #adc6ff !important;
}
.ant-alert-info .ant-alert-icon {
  color: #2f54eb !important;
}
.ant-tag-blue {
  color: #2f54eb !important;
  background: #f0f5ff !important;
  border-color: #adc6ff !important;
}

.scale__img {
  max-width: 100%;
}

.ant-cascader-picker {
  .anticon {
    color: rgba(0, 0, 0, 0.25);
  }
}

.limit__box {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
}

.limit__box1 {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.files__box .file__item {
  white-space: nowrap;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 160px;
  .image {
    cursor: pointer;
    color: #2f54eb;
  }
}

.popover__box {
  max-width: 380px;
  min-width: 120px;
  .popover__name {
    font-weight: bold;
  }
  .popover__item {
    padding: 4px 0;
    border-bottom: #f1f1f1 solid 1px;
  }
  .popover__item:last-child {
    border-bottom: none;
  }
  .popover__li {
    display: flex;
    padding: 1px 0;
    line-height: 24px;
    .popover__li-title {
      flex-shrink: 0;
    }
    .file__option {
      margin-bottom: 6px;
      max-width: 400px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      &:last-child {
        margin-bottom: 0;
      }
      .image {
        cursor: pointer;
        color: #2f54eb;
      }
    }
  }
}

.other-popover .ant-popover-inner-content {
  padding: 6px 16px;
}

.table-page-search-wrapper .ant-form-inline .ant-form-item {
  margin-bottom: 18px !important;
}

.task__box {
  display: flex;
  padding: 0 24px;
  width: 100%;
  margin-bottom: 10px;
  .task__label {
    padding-right: 8px;
    color: rgba(0, 0, 0, 0.85);
    flex-shrink: 0;
    &::after {
      content: ':';
      position: relative;
      top: -0.5px;
      margin: 0 8px 0 2px;
    }
  }
  .task__list {
    display: flex;
    flex-wrap: wrap;
    flex-grow: 1;
  }
  .task__item {
    width: 25%;
    margin-bottom: 10px;
  }
}

.extra__span::before {
  display: inline-block;
  margin-right: 4px;
  color: #f5222d;
  font-size: 14px;
  font-family: SimSun, sans-serif;
  line-height: 1;
  content: '*';
}

.ant-tag.tag__item {
  padding: 0 4px;
  line-height: 16px;
  margin-right: 4px;
  i {
    font-style: normal;
    font-size: 10px;
  }
}

.des__div {
  max-width: 200px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  vertical-align: bottom;
}
</style>
